<template>
  <div class="categories-page">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" @click="isCategoriesShow('', '添加')"
        >添加分类</el-button
      >
      <tree-table
        :data="categoriesList"
        :columns="columns"
        :expand-type="false"
        :selection-type="false"
        show-index
        class="treetable"
        index-text="#"
        stripe
        border
      >
        <template #isok="{ row }">
          <i v-if="row.cat_deleted === false" class="el-icon-success"></i>
          <i v-else class="el-icon-error"></i>
        </template>
        <template #order="{ row }">
          <el-tag v-if="row.cat_level === 0" type="primary" size="mini"
            >一级</el-tag
          >
          <el-tag v-else-if="row.cat_level === 1" type="success" size="mini"
            >二级</el-tag
          >
          <el-tag v-else type="warning" size="mini">三级</el-tag>
        </template>
        <template #opt="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="isCategoriesShow(row.cat_id, '编辑')"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delCategories(row.cat_id)"
            >删除</el-button
          >
        </template>
      </tree-table>
      <el-pagination
        :current-page="pagenum"
        :page-sizes="[2, 5, 7, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="changePage"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      :title="stem"
      :visible.sync="categoriesDialogVisible"
      width="50%"
      @close="categoriesClose"
    >
      <el-form
        :model="editForm"
        ref="editForm"
        label-width="80px"
        :rules="editRules"
      >
        <el-form-item label="分类名称" prop="catName">
          <el-input v-model="editForm.catName"></el-input>
        </el-form-item>
        <el-form-item label="父级分类" v-if="stem === '添加'">
          <el-cascader
            v-model="selectedKeys"
            :options="parentCateList"
            :props="{ ...cascaderProps, checkStrictly: 'true' }"
            expand-trigger="hover"
            @change="parentHandleChange"
            style="width: 100%"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="categoriesDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addCategoriesInfoApi,
  delCategoriesInfoApi,
  editCategoriesApi,
  getCategoriesInfoApi,
  getCategoriesShopList,
  getParentCateList,
} from "@/api/categories";

export default {
  name: "categoriesPage",
  data() {
    return {
      categoriesList: [],
      parentCateList: [],
      // 为table指定列的定义
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          // 表示,将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "isok",
        },
        {
          label: "排序",
          // 表示,将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "order",
        },
        {
          label: "操作",
          // 表示,将当前列定义为模板列
          type: "template",
          // 表示当前这一列使用模板名称
          template: "opt",
        },
      ],
      type: 3,
      pagenum: 1,
      pagesize: 2,
      total: 1,
      categoriesDialogVisible: false,
      stem: "",
      cat_level: 0,
      cat_pid: 0,
      selectedKeys: [],
      cascaderProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      editForm: {
        catName: "",
        catId: "",
      },
      editRules: {
        catName: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getCategoriesList();
  },
  methods: {
    async getCategoriesList() {
      const res = await getCategoriesShopList({
        type: this.type,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      // console.log(res);
      this.categoriesList = res.data.result;
      this.total = res.data.total;
      // console.log(this.categoriesList);
    },
    changePage(page) {
      this.pagenum = page;
      this.getCategoriesList();
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getCategoriesList();
    },
    categoriesClose() {
      this.$refs.editForm.resetFields();
      if (this.stem === "添加") {
        this.cat_level = 0;
        this.cat_pid = 0;
        this.selectedKeys = [];
        this.parentCateList = [];
      }
    },
    async isCategoriesShow(id, val) {
      this.categoriesDialogVisible = true;
      this.stem = val;
      if (val === "编辑") {
        const res = await getCategoriesInfoApi(id);
        // console.log(res);
        if (res.meta.status !== 200) {
          return this.$message.error("数据获取失败");
        }
        this.editForm.catName = res.data.cat_name;
        this.editForm.catId = res.data.cat_id;
      } else if (val === "添加") {
        const res = await getParentCateList({ type: 2 });
        // console.log(res);
        if (res.meta.status !== 200) {
          return this.$message.error("数据获取失败");
        }
        this.parentCateList = res.data;
      }
    },
    parentHandleChange() {
      if (this.selectedKeys.length > 0) {
        //获取选中的ID
        this.cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
        //获取当前分类登记
        this.cat_level = this.selectedKeys.length;
        return;
      } else {
        this.cat_pid = 0;
        this.cat_level = 0;
      }
    },
    async submit() {
      // console.log(this.editForm.catId);
      if (this.stem === "编辑") {
        const res = await editCategoriesApi(this.editForm.catId, {
          cat_name: this.editForm.catName,
        });
        if (res.meta.status === 200) {
          this.$message.success("修改成功");
          this.getCategoriesList();
        } else {
          this.$message.error(res.meta.msg);
        }
      } else if (this.stem === "添加") {
        const res = await addCategoriesInfoApi({
          cat_level: this.cat_level,
          cat_name: this.editForm.catName,
          cat_pid: this.cat_pid,
        });
        if (res.meta.status === 201) {
          this.$message.success("添加成功");
          this.getCategoriesList();
        } else {
          this.$message.error(res.meta.msg);
        }
      }
      this.categoriesDialogVisible = false;
    },
    async delCategories(id) {
      const resConfrm = await this.$confirm(
        "此操作将删除该该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (resConfrm !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const res = await delCategoriesInfoApi(id);
      // console.log(res);
      if (res.meta.status === 200) {
        this.$message.success("删除成功");
        this.getCategoriesList();
      } else {
        this.$message.error(res.meta.msg);
      }
      this.getCategoriesList();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}
.treetable {
  margin-top: 15px;
}
.el-icon-success {
  font-size: 17px;
  color: #90ee90;
}
.el-icon-error {
  font-size: 17px;
  color: red;
}
</style>
